<template>
  <div class="homes">
    <div class="homesa">
      <h3 class="lingqu">
        <span>❤️前端</span>
        <span>❤️后端</span>
        <span>❤️ui</span>
        <span>❤️人工智能</span>
      </h3>
      <div class="setionsa">Rookie联盟 | IT热爱者集结地</div>
      <div class="jie">
        <p class="jie_1">
          <span>网站开发</span>
          <span>工具制作</span>
          <span>语言识别</span>
          <span>it教育</span>
        </p>
        <p class="jie_2">码云项目推荐</p>
        <p class="jie_3">零基础菜鸟编程入门咨询平台</p>
        <div class="btns" @click="scogo('##about')">继续了解</div>
      </div>
    </div>
    <div class="rightsimgs">
      <img src="../../assets/Homes.jpeg" id="imfs" alt="" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { mapMutations, useStore } from "vuex";

export default defineComponent({
  setup() {
    const { commit, state, getters } = useStore();

    const scogo = (dom: any): void => {
      window.scrollTo({
        top:
          document.querySelector(dom.substring(1, dom.length)).offsetTop -
          document.querySelector(".headser").clientHeight,
        behavior: "smooth", //这个属性实现滑动效果的
      });
    };
    onMounted(() => {
      setTimeout(() => {
        show();
      }, 5000);
    });
    function show(): void {
      const element = document.querySelector(".setionsa");
      const imfs = document.querySelector("#imfs");
      imfs.classList.add("animate__animated", "animate__backInRight");
      element.classList.add("animate__animated", "animate__backInLeft");
    }

    return {
      scogo,
    };
  },
});
</script>

<style lang="less" scoped>
.homes {
  // background-color: pink;
  width: 15rem;
  height: var(--hesihts);
  display: flex;
  padding-top: 1rem;
  position: relative;
  .homesa {
    // position: absolute;
    color: var(--fontColor);
    // height: 6.25rem;
    margin-top: 1.5rem;
    flex: 7;
    .lingqu {
      span {
        margin-right: 0.425rem;
      }
    }

    .setionsa {
      font-size: 0.7rem;
      margin: 0.225rem 0;
      text-shadow: 0.2rem 0 0.125rem var(--HoverColor);
    }

    .jie {
      font-size: 0.25rem;
      font-weight: 200;
      line-height: 2;
      .jie_1 {
        span {
          margin-right: 0.125rem;
        }
      }

      .jie_2 {
      }

      .jie_3 {
      }
      .btns {
        margin-top: 0.25rem;
        text-align: center;
        line-height: 2.5;
        height: 0.7rem;
        width: 2.2rem;
        cursor: pointer;
        background-image: linear-gradient(
          to bottom right,
          var(--bgColor) 10%,
          #fff 90%
        );
        border-radius: 5%;
        color: #000;
        font-size: 0.275rem;
        transition: all 0.3s ease;
        &:hover {
          background-color: #000;
          background-image: linear-gradient(
            to bottom right,
            var(--bgColor) 10%,
            rgb(7, 7, 7) 90%
          );
          color: var(--fontColor);
        }
      }
    }
  }

  .rightsimgs {
    flex: 4;
    text-align: center;
    margin-top: 1rem;
    img {
      // transform: scale(0.5);
      box-shadow: -0.25rem -0.25rem 0.3rem #663366;
      height: 6.25rem;
      width: 4.25rem;
      outline: 0.0825rem solid var(--boxColor);
      // transform: rotate(10deg);
      transform: skew(-8deg) !important;
      transition: all 5s ease-in;
      // animation: filters 3s ease 0.3s infinite;
      @keyframes filters {
        0%,
        100% {
          filter: blur(0px);
        }

        50% {
          filter: blur(3px);
        }
      }
    }
  }
}
</style>